<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>成交单申请</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" charset="utf-8" src="../layui/xm-select1.js"></script>
    <link rel="stylesheet" href="../layui-v2.9.8/layui/css/layui.css">
    <script src="../layui-v2.9.8/layui/layui.js"></script>
</head>
<body>

<style>
    .layui-form-label {
        text-align: left; /* 设置文字左对齐 */
    }
</style>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>投诉申请</legend>
</fieldset>

<form class="layui-form" action="/process/complaintadd" enctype="multipart/form-data" method="post"id="complaintForm">
    <div style="display: none"><input type="text"name="id" id="formid" th:value="${id}"></div>
    <div style="display: none"><input type="text"name="salesman"  th:value="${userDetails.realName}"></div>
    <!--    第一行-->
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">客户姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="customerName" lay-verify="customerName"  class="layui-input"   autocomplete="off"  lay-affix="clear" >
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" name="telephone" lay-verify="telephone"  class="layui-input"  autocomplete="off"  lay-affix="clear" >
            </div>
        </div>
    </div>
    <!--    第二行 readonly属性为只读-->
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">业务员</label>
            <div class="layui-input-inline">
                <input type="text" name="salespersonname" lay-verify="required|salespersonname"  autocomplete="off"  lay-affix="clear" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">成交日期</label>
            <div class="layui-input-inline">
                <input type="text" name="completionDate" id="completionDate" lay-verify="completionDate" autocomplete="off"  class="layui-input" lay-affix="clear">
            </div>
        </div>
    </div>
    <!--    第三行-->
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">软件版本</label>
            <div class="layui-input-inline">
                <input type="text" name="softwareVersion" lay-verify="softwareVersion"  class="layui-input"  autocomplete="off"  lay-affix="clear" >
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">办理金额</label>
            <div class="layui-input-inline">
                <input type="text" name="processingAmount" lay-verify="processingAmount" class="layui-input"  autocomplete="off"  lay-affix="clear" >
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">投诉单位</label>
            <div class="layui-input-inline">
                <input type="text" name="complaintUnit" lay-verify="complaintUnit"  class="layui-input"  autocomplete="off"  lay-affix="clear" >
            </div>
        </div>

    <div class="layui-inline">
        <label class="layui-form-label">审核人</label>
        <div class="layui-input-block">
            <select id="auditingperson" name="auditingPerson" lay-verify="required">
                <option value=""></option>
                <option th:each="BaseUser : ${lb}"th:value="${BaseUser.username}" th:text="${BaseUser.realName}"></option>
            </select>
        </div>
    </div>
    </div>
    <!--    第四行-->
     <label class="layui-form-label">客服接到客户反馈</label>
     <div class="layui-col-xs5">
            <textarea name="complaintOpinions" class="layui-textarea" lay-verify="complaintOpinions" placeholder="字数小于500" style="width: 72%"></textarea>
            <input type="file" name="filePath" id="user-photo" lay-verify="file" multiple>
     </div>
     <div class="layui-form-item">
     <div class="layui-inline">
         <div id="imgdiv">

         </div>
          </div>
     </div>


    <div class="layui-form-item" >
        <div class="layui-inline" style="padding-left: 22px;">
            <button class="layui-btn"lay-submit lay-filter="submitForm" style="padding-left: 22px; margin-bottom: 20px;">提交投诉单</button>
        </div>
    </div>
</form>

<script>
    function deleteprocess() {
        // 创建表单数据对象
        var formData = new FormData();
        formData.append("id", layui.$("#formid").val());
        // 使用sendBeacon方法发送异步请求
        navigator.sendBeacon("/process/delete", formData);
    }
    layui.use(['form', 'util', 'laydate'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var  $=layui.$;
        var keys=[]
        var xm
        window.addEventListener("beforeunload",deleteprocess);
        // 上传多张图片
        var getUserPhoto = document.getElementById("user-photo");
        getUserPhoto.addEventListener('change', function() {
            var filePath = this.files;
            var imgdiv = document.getElementById("imgdiv");
            var form = document.getElementById("complaintForm"); // 获取表单

            // 清空图片容器
            imgdiv.innerHTML = '';

            for (var i = 0; i < filePath.length; i++) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var image = document.createElement("img");
                    image.src = e.target.result;
                    image.style.maxWidth = "200px";
                    image.style.maxHeight = "200px";
                    imgdiv.appendChild(image);

                    // 创建隐藏的input标签，用于提交图片数据
                    var input = document.createElement("input");
                    input.type = "hidden";
                    input.name = "filePath[]"; // 注意这里将name属性设置为数组形式
                    input.value = e.target.result;
                    form.appendChild(input); // 将input元素追加到表单中
                };
                reader.readAsDataURL(filePath[i]);
            }
        });
        //日期
        laydate.render({
            elem: '#completionDate',
            format: 'yyyy-MM-dd', // 设定日期显示格式
            type: 'date'
        });
        $.ajax({
            url: "/user/queryforselect",
            type: "post",
            async: true,
            success: function (data) {
                if(data.data){
                    for (var i = 0; i < data.data.length; i++) {
                        var temp = {
                            "name": data.data[i].realName,
                            "value": data.data[i].username  //value为唯一标识，此处为id
                        }
                        keys.push(temp)
                    }
                    xm=xmSelect.render({
                        el: '#copyPersonSelect',
                        direction: 'up',
                        filterable: true,
                        data: keys
                    })
                }
            },
        });
        var getUserPhoto = document.getElementById("user-photo");
        getUserPhoto.onchange = function () {
            var file = this.files;
            var reader = new FileReader();
            reader.readAsDataURL(file[0]);
            reader.onload = function () {
                $("#show-picture").attr("src",reader.result)
                // var showPicture = document.getElementById("show-picture");
                // showPicture.append(image);
            };
        };
        form.on('submit(submitForm)', function(data){
            var formData = data.field; // 获取表单数据对象
            console.log(formData); // 打印整个表单数据对象到控制台
            window.removeEventListener("beforeunload",deleteprocess);
            var sindex= layer.load(2, {shade: [0.5,'#000']});
            var paymentMethodVal ;
            var paymentAddressVal ;

            $(this).append("<input type='hidden' name='copyPersons' value='"+JSON.stringify(copyPersons)+"'>");
            $(this).append("<input type='hidden' name='newpaymentMethod' value='"+JSON.stringify(paymentMethodVal)+"'>");
            $(this).append("<input type='hidden' name='newpaymentAddress' value='"+JSON.stringify(paymentAddressVal)+"'>");
            return true;
        });
        //自定义验证规则
        form.verify({
            customerName: function(value){
                if(value.length < 1){
                    return '必填';
                }
            },
            telephone: function(value){
                if(value.length < 1){
                    return '必填';
                }
                if (!/^1[3456789]\d{9}$/.test(value)){
                    return  "请输入正确电话号码"}
            },
            completionDate: function(value){
                if(value.length < 1){
                    return '必填';
                }
            },
            softwareVersion: function(value){
                if(value.length < 1){
                    return '必填';
                }
            },
            processingAmount: function(value){
                if(value.length < 1){
                    return '必填';
                }
            },
            salespersonname: function(value){
            if(value.length < 1){
                return '必填';
            }
        },
            complaintOpinions: function(value){
                var filePathValue = $('#user-photo').val(); // 获取文件路径值
                if (value.length < 1 && filePathValue.length < 1) {
                    return '客服接到客户反馈或上传文件至少填写一项';
                }
            }

        });



    });

</script>

</body>
</html>